/**
* 功能描述: 可选择行demo
* @author 崔孝楠
* @date 2022/10/8 18:37
* @version 1.0
*/
<template>
  <span>可选择行</span>
  <div class="yw-table">
    <div class="yw-table-container">
      <div class="yw-table-content">
        <table style="table-layout: auto;">
          <!-- 设置列的width -->
          <colgroup>
            <col class="yw-table-selection-col">
          </colgroup>
          <!-- 表头 -->
          <thead class="yw-table-thead">
          <tr>
            <!-- 全选复选框 -->
            <th class="yw-table-cell yw-table-selection-column" colstart="0" colend="0">
              <label class="yw-checkbox-wrapper">
                <span class="yw-checkbox">
                  <input type="checkbox" class="yw-checkbox-input">
                  <span class="yw-checkbox-inner"></span>
                </span>
              </label>
            </th>
            <th class="yw-table-cell" colstart="1" colend="1">
              Name
            </th>
            <th class="yw-table-cell" colstart="2" colend="2">
              Gender
            </th>
            <th class="yw-table-cell" colstart="3" colend="3">
              Email
            </th>
          </tr>
          </thead>
          <tbody class="yw-table-tbody">
            <tr data-row-key="1" class="yw-table-row">
              <td class="yw-table-cell">
                <label class="yw-checkbox-wrapper">
                  <span class="yw-checkbox">
                    <input type="checkbox" class="yw-checkbox-input">
                    <span class="yw-checkbox-inner"></span>
                  </span>
                </label>
              </td>
              <td class="yw-table-cell">
                <a>John Brown</a>
              </td>
              <td class="yw-table-cell">
                Male
              </td>
              <td class="yw-table-cell">
                amber@123
              </td>
            </tr>
            <tr data-row-key="1" class="yw-table-row">
              <td class="yw-table-cell">
                <label class="yw-checkbox-wrapper">
                  <span class="yw-checkbox">
                    <input type="checkbox" class="yw-checkbox-input">
                    <span class="yw-checkbox-inner"></span>
                  </span>
                </label>
              </td>
              <td class="yw-table-cell">
                <a>John Brown</a>
              </td>
              <td class="yw-table-cell">
                Male
              </td>
              <td class="yw-table-cell">
                amber@123
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tableWithCheckBox"
}
</script>

<style scoped>

</style>
